<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getArticleDetailsByCategory } from "@/api/articleController.js";
import {message} from "ant-design-vue";

const route = useRoute()
const categoryName = ref(route.meta.category)
const articlesId = ref(route.params.id)
const articleDetails = ref<API.ArticlesVO>({});

// 获取数据
const fetchData = async () => {
  const res = await getArticleDetailsByCategory({
    category: categoryName.value,
    articlesId: articlesId.value,
  })
  if (res.data.data) {
    articleDetails.value = res.data.data;
  } else {
    message.error('获取文章详情失败，' + res.data.message);
  }
}
onMounted(() => {fetchData()})

</script>

<template>
  <div class="article_detail">
    <h1>{{ articleDetails.title }}</h1>
    <div class="content">
      {{articleDetails.author}}
      {{articleDetails.published_at}}
      {{ articleDetails.content }}
    </div>
  </div>
</template>

<style scoped>

</style>
